<template>
  <div>
    <div class="login">
      <div class="header">
        <Icon class="back" type="md-arrow-back" :size="25" title="返回" @click="back" />
      </div>
      <form ref="loginForm" :model="form">
        <div class="user">
          <Input prefix="ios-contact" v-model.trim="form.mobile" placeholder="请输入账号" :maxlength="11" type="text" style="width: auto" />
        </div>
        <div class="psd">
          <Input prefix="md-lock" v-model.trim="form.password" placeholder="请输入密码" :type="passwordType" style="width: auto" />
          <Icon class="show" :type="passwordIcon" :size="25" title="显示密码" @click="showPassword" />
        </div>
        <div class="psd">
          <Input prefix="md-lock" v-model.trim="form.password" placeholder="请再次输入密码" :type="passwordType" style="width: auto" />
          <Icon class="show" :type="passwordIcon" :size="25" title="显示密码" @click="showPassword" />
        </div>
        <Button type="primary" :loading="loading" class="loginBtn" @click="handleSubmit">注册</Button>
      </form>
      <p class="version">版本号 v{{ version }}</p>
    </div>
  </div>
</template>
<script>
  import { version } from '../../../package.json'
  export default {
    data () {
      return {
        version, // 版本号(package.json中设置)
        passwordType: 'password',
        passwordIcon: 'ios-eye-outline',
        form: {
          mobile: '',
          password: ''
        },
        auto: false,
        loading: false
      }
    },
    mounted () {
      this.auto = localStorage.getItem('auto') === 'true'
      if (this.auto) {
        this.form.mobile = localStorage.getItem('mobile')
        this.form.password = localStorage.getItem('password')
      }
    },
    methods: {
      // 显示隐藏密码
      showPassword () {
        if (this.passwordType === 'password') {
          this.passwordType = 'text'
          this.passwordIcon = 'ios-eye'
        } else {
          this.passwordType = 'password'
          this.passwordIcon = 'ios-eye-outline'
        }
      },
      // 返回
      back () {
        this.$router.push({path: '/'})
      },
      // 注册
      handleSubmit () {
        this.loading = true
        // const params = {
        //   mobile: this.form.mobile, // 账号
        //   password: this.form.password // 密码
        // }
        // let response = this.$http.post(this.$api.LOGIN, params)
        this.loading = false
        // if (response.data.status !== '1') {
        //   this.$Message.error('请输入正确的用户名和密码')
        //   return
        // }
        if (this.auto) {
          localStorage.setItem('mobile', this.form.mobile)
          localStorage.setItem('password', this.form.password)
        }
        this.$router.push({path: '/home'})
      }
    }
  }
</script>
<style>
  .login{
    width: 320px;
    height: 540px;
    background-color: #fff;
    position: relative;
    border-radius: 4px;
    background-image: url('../assets/images/timg.jpg');
    background-repeat:no-repeat;
    background-size:320px 540px;
  }
  .header{
    width: 100%;
    height: 40px;
    color: #fff;
  }
  .header .back{
    float: left;
    margin-left: 10px;
    line-height: 40px;
  }
  .login .user{
    text-align: center;
    margin-top: 180px;
  }
  .login .user .ivu-icon{
    color: rgba(255,255,255,0.5);
  }
  .login .user .ivu-input{
    background-color: transparent;
    border: solid #cfcfcf 1px; 
    color: #fff;
    outline: none;
  }
  .user .ivu-input:hover{
    border-color: #fff;
  }
  .user .ivu-input:focus{
    border-color: #fff;
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 8px;
  }
  .psd{
    text-align: center;
    margin-top: 20px;
  }
  .psd .ivu-input{
    background-color: transparent;
    border: solid #cfcfcf 1px; 
    color: #fff;
  }
  .psd .ivu-input:hover{
    border-color: #fff;
  }
  .psd .ivu-input:focus{
    border-color: #fff;
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 8px;
  }
  .psd .ivu-icon{
    color: rgba(255,255,255,0.5);
  }
  .psd .show{
    position: absolute;
    margin-left: -30px;
    margin-top: 4px;
  }
  .lock{
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-top: 20px;
    text-align: center;
    color: #fff;
  }
  .lock .ivu-checkbox-inner{
    background-color: transparent;
    box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 8px;
  }
  .lock .ivu-checkbox-checked:hover .ivu-checkbox-inner{
    border-color: #fff;
  }
  .lock .ivu-checkbox-checked .ivu-checkbox-inner{
    background-color: transparent;
    border-color: #fff;
  }
  .login .loginBtn{
    width: 80px;
    height: 30px;
    margin-left: 120px;
    margin-top: 20px;
    background-color: transparent;
    border: solid #cfcfcf 1px; 
  }
  .login .loginBtn:hover{
    background-color: rgba(255,255,255,0.5);
    border-color: rgba(255,255,255,0.5);
  }
  .version{
    text-align: center;
    color: #fff;
    margin-top: 100px;
  }
</style>

